import {Component} from 'react'
import style from './index.less'
import React from "react";

//CommentApp：评论功能的整体用一个叫 CommentApp 的组件包含起来。CommentApp 包含上部和下部两部分。
class CommentApp extends Component {
  constructor (props) {
    super(props);
    this.state = {
      comments: []
    }
  }
  componentWillMount () {
    this._loadComments()
  }
  _loadComments () {
    let comments = localStorage.getItem('comments');
    if (comments) {
      comments = JSON.parse(comments);
      this.setState({ comments });
    }
  }
  _saveComments (comments) {
    localStorage.setItem('comments', JSON.stringify(comments))
  }
  handleSubmitComment (comment) {
    if (!comment) return;
    if (!comment.username) return alert('请输入用户名');
    if (!comment.content) return alert('请输入评论内容');
    const comments = this.state.comments;
    comments.push(comment);
    this.setState({ comments });
    this._saveComments(comments)
  }
  render() {
    return (
      <div className={style.wrapper}>
        <CommentInput onSubmit={this.handleSubmitComment.bind(this)} />
        <CommentList comments={this.state.comments}/>
      </div>
    );
  }
}

//CommentInput：上面部分是负责用户输入可操作的输入区域，包括输入评论的用户名、评论内容和发布按钮，这一部分功能划分到一个单独的组件 CommentInput 中。
class CommentInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      content: ''
    }
  }
  handleUsernameChange(event) {
    this.setState({
      username: event.target.value
    })
  };
  handleContentChange(event) {
    this.setState({
      content: event.target.value
    })
  }
  handleSubmit() {
    //判断父组建是否传入了方法，然后想方法传递数据
    if (this.props.onSubmit) {
      const {username, content} = this.state;
      this.props.onSubmit({username, content})
    }
    this.setState({content: ''})
  }
  componentWillMount () {
    this._loadUsername()
  }
  _loadUsername () {
    const username = localStorage.getItem('username')
    if (username) {
      this.setState({ username })
    }
  }
  _saveUsername (username) {
    localStorage.setItem('username', username)
  }
  handleUsernameBlur (event) {
    this._saveUsername(event.target.value)
  }
  componentDidMount() {
    this.textarea.focus()
  }

  render() {
    return (
      <div className={style['comment-input']}>
        <div className={style['comment-field']}>
          <span className={style["comment-field-name"]}>用户名：</span>
          <div className={style["comment-field-input"]}>
            <input value={this.state.username}
                   onBlur={this.handleUsernameBlur.bind(this)}
                   onChange={this.handleUsernameChange.bind(this)}/>
          </div>
        </div>
        <div className={style['comment-field']}>
          <span className={style["comment-field-name"]}>评论内容：</span>
          <div className={style["comment-field-input"]}>
            <textarea ref={(textarea) => this.textarea = textarea}
                      value={this.state.content}
                      onChange={this.handleContentChange.bind(this)}/>
          </div>
        </div>
        <div className={style['comment-field-button']}>
          <button onClick={this.handleSubmit.bind(this)}>
            发布
          </button>
        </div>
      </div>
    );
  }
}

//CommentList：下面部分是评论列表，用一个叫 CommentList 的组件负责列表的展示 。
class CommentList extends Component {
  static defaultProps = {
    comments: []
  }
  render() {
    return (
      <div>
        {this.props.comments.map((comment, i) =>
          <Comment comment={comment} key={i} />
        )}
      </div>
    )
  }
}

//Comment：每个评论列表项由独立的组件 Comment 负责显示，这个组件被 CommentList 所使用。
class Comment extends Component {
  render() {
    return (
      <div className={style.comment}>
        <div className={style["comment-user"]}>
          <span>{this.props.comment.username} </span>：
        </div>
        <p>{this.props.comment.content}</p>
      </div>
    );
  }
}

export default CommentApp;
